<template>
  <form class="auth-wrap" @keypress.enter="submit" onsubmit="return false">
    <nav>
      <a :class="{'on':user_type == 2}" @click="changeRegisterUser('user')">个人</a>
      <a :class="{'on':user_type == 1}" @click="changeRegisterUser('org')">机构</a>
    </nav>
    <!-- phone -->
    <div v-if='by == type_enum.phone'>
      <div class="form-item fx fx-vc">
        <div class="form-label" @click="changeAreaCode">
          <div class="fx fx-vc fx-between">
            <span>+{{phone_area_code}}</span>
            <i class="arrow"></i>
          </div>
        </div>
        <Input type="tel" class="flex" v-model="phone" placeholder="请输入手机号码"/>
      </div>
      <div class="form-item fx fx-vc">
        <span class="form-label">验证码</span>
        <Input type="tel" class="flex" v-model="ver_code" placeholder="请输入验证码"/>
        <a @click="getVerCode($event)" class="ver-code" :disabled='!valid_ver(phone)'>{{ver_time_text(type_enum.phone)}}</a>
      </div>
    </div>
    <!-- potato -->
    <div v-else-if='by == type_enum.potato'>
      <div class="form-item fx fx-vc">
        <div class="form-label" @click="changeAreaCode">
          <div class="fx fx-vc fx-between">
            <span>+{{potato_area_code}}</span>
            <i class="arrow"></i>
          </div>
        </div>
        <Input type="tel" class="flex" v-model="potato" placeholder="请输入Potato号码"/>
      </div>
      <div class="form-item fx fx-vc">
        <span class="form-label">验证码</span>
        <Input type="tel" class="flex" v-model="ver_code" placeholder="请输入验证码"/>
        <a @click="getVerCode($event)" class="ver-code" :disabled='!valid_ver(potato)'>{{ver_time_text(type_enum.potato)}}</a>
      </div>
    </div>
    <!-- email -->
    <div v-else>
      <div class="form-item fx fx-vc">
        <span class="form-label">邮箱</span>
        <Input type="email" class="flex" v-model="email" placeholder="请输入邮箱"/>
      </div>
      <div class="form-item fx fx-vc">
        <span class="form-label">验证码</span>
        <Input type="tel" class="flex" v-model="ver_code" placeholder="请输入验证码"/>
        <a @click="getVerCode($event)" class="ver-code" :disabled='!valid_ver(email)'>{{ver_time_text(type_enum.email)}}</a>
      </div>
    </div>

    <p class="agreement">注册即代表您已接受<nuxt-link to="/agreement">《服务协议及隐私权政策》</nuxt-link></p>

    <a class="btn btn-block btn-primary" :disabled="!valid_form" @click="submit">下一步</a>

    <div v-if="by == type_enum.phone && origin == 4" class="change-type">
      <div>使用<a @click="changeRegisterType(type_enum.potato)">Potato注册</a></div>
    </div>
    <div v-else-if="by == type_enum.potato && origin == 4" class="change-type">
      <div>使用<a @click="changeRegisterType(type_enum.phone)">手机号码注册</a></div>
    </div>

    <div v-if="by == type_enum.phone && origin != 4" class="change-type fx fx-between fx-vc">
      <div>使用<a @click="changeRegisterType(type_enum.potato)">Potato注册</a></div>
      <div>使用<a @click="changeRegisterType(type_enum.email)">邮箱注册</a></div>
    </div>
    <div v-else-if="by == type_enum.potato && origin != 4" class="change-type fx fx-between fx-vc">
      <div>使用<a @click="changeRegisterType(type_enum.phone)">手机号码注册</a></div>
      <div>使用<a @click="changeRegisterType(type_enum.email)">邮箱注册</a></div>
    </div>
    <div v-else-if="type_enum.email && origin != 4" class="change-type fx fx-between fx-vc">
      <div>使用<a @click="changeRegisterType(type_enum.phone)">手机号码注册</a></div>
      <div>使用<a @click="changeRegisterType(type_enum.potato)">Potato注册</a></div>
    </div>
    <nuxt-link to="/login" class="footer" v-if="this.origin != 4">已有账号，去登录</nuxt-link>
  </form>
</template>

<script>
import register from '~/minxins/register';

export default {
  mixins: [register],
  computed: {

  },
  data(){
    return {
      //用户类型
      user_type:2, // 2个人 1机构
      by:1,
    }
  },
  mounted(){
    this.$emit('changeBg','#fff');
  },
  methods: {
    async submit(){
      if(this.posting || !this.valid_form) return false;
      this.posting = true;
      // 切换的时候清空当前数据
      if(this.by == this.type_enum.phone){
        this.email = '';
        this.potato = ''
      }else if(this.by == this.type_enum.email){
        this.phone = '';
        this.potato = ''
      } else{
        this.email = '';
        this.phone = '';
      }
      let {
        email,
        phone,
        phone_area_code,
        potato,
        potato_area_code,
        by,
        ver_code,
        user_type,
      } = this.$data;

      try{
        // 检查用户是否已存在会员
        let { data:rs } = await this.$axios.post('?ct=member&ac=reg_is_exists',{
          email,
          phone,
          phone_area_code,
          potato,
          potato_area_code,
          by,
          ver_code,
          user_type,
          origin:this.origin,
          originType:this.originType,
        });

        // 缓存表单数据
        this.$store.commit('register/SET_FORM',{
          email,
          phone,
          phone_area_code,
          potato,
          potato_area_code,
          by,
          ver_code,
          user_type,
          origin:this.origin,
          originType:this.originType,
        });

        if(rs.code == 0){ // 已存在账号的情况
          const { data } = rs;
          //更新token，uid
          this.$store.commit("SET_UID",data.uid);
          this.$store.commit("SET_TOKEN",data.token);
          this.$alert({
              title:`该${email ? '邮箱' : (potato ? 'potato' :  '手机')}已注册了账号，您可以点击${email ? '进行' : '直接'}登录`,
              cancel:true,
              okText:'登录'
            }).then(async ()=>{
              if(email){
                this.$router.push({name:'login',query:{
                  type:2,
                  origin: this.origin,
                  originType: this.originType,
                  email:email,
                }})
                return;
              }
              if(data.is_need_reset_pwd == 1){ //需要重置密码
                //清空表单状态
                this.$store.commit('register/SET_FORM',null);
                sessionStorage.setItem('recheck_user',JSON.stringify(data));

                this.$router.push({name:'login-password',
                  query:{
                    from:'register',
                    originType: this.originType,
                    origin:this.origin,
                    isNew: false
                  },
                });
              } else  if(data.select_member == 0 && data.group_labels.length == 1){ //如果只有一个账号且不需要选择用户
                let param = {
                  uid:data.uid,
                  pid:data.group_labels[0].uid,
                  token:data.token,
                  origin:this.origin,
                  originType:this.originType,
                }
                this.$emit('loading',true)
                let { data: srs } = await this.$axios.post('?ct=api&ac=select_member',param);
                if(srs.code === 0){
                  const sdata = srs.data;
                  //清空表单状态
                  this.$store.commit('register/SET_FORM',null);

                  //登录成功设置token
                  this.$store.commit('SET_USER',sdata);
                  this.$store.commit('SET_UID',sdata.uid);
                  this.$store.commit('SET_TOKEN',sdata.token);
                  //（单个用户） 首次扫描注册成功 跳到完善资料 + 不是扫描或者资料已经完善 跳到首页
                  if(sdata.flow_status == 0 && this.origin == 4) {
                    this.$router.push({name:'complete_info'});
                  } else {
                    this.$router.replace('/');
                  }
                }else{
                  this.$toast(rs.msg);
                }
                this.$emit('loading',false)
              }else if(data.select_member == 1){
                this.$store.commit("register/SET_EXISTS",data.group_labels);
                this.$router.push({
                  name:'login-list',
                  query:{type:this.user_type, origin:this.origin, originType:this.originType, isNew: false},
                  params: {list: data.group_labels, token: data.token}
                });
              }
          })
        }else if (rs.code === -10100) { // 账号不存在的情况
          this.$router.push({
            name:'register-password',
            query:{type:this.user_type, origin:this.origin, originType:this.originType, isNew:true},
          });
        }else{
          this.$toast(rs.msg);
        }
        this.posting = false;
      }catch(e){
        this.$error(e);
        this.posting = false;
      }
    }

  }
}
</script>

<style lang="less" scoped>
  nav {
    display: flex;
    height:70px;
    border-bottom:1px solid #edeef0;

    a {
      position: relative;
      font-size:30px;
      width:50%;
      height:100%;
      display: flex;
      align-items: center;
      justify-content: center;

      &.on {
        color:#2086f9;
        &::after {
          content:'';
          position: absolute;
          left:0;
          right:0;
          bottom:4px;
          margin:auto;
          width:32px;
          height:4px;
          border-radius:4px;
          background-color:#2086f9;

        }
      }
    }
  }
  .arrow {
      display: block;
      border-bottom:1px solid #999;
      border-left: 1px solid #999;
      width:10px;
      height:10px;
      transform: rotate(-45deg)
  }

  .agreement {
    font-size:24px;
    color:#666;
    margin:54px 0 30px;
    text-align: center;
  }
  .change-type {
    margin:24px auto;
    line-height: 64px;
    text-align: center;
    font-size:30px;
    color:#666;
    a {
      color: @color-primary
    }
  }

  .login {
    position: absolute;
    text-align: center;
    left:0;
    right:0;
    bottom:58px;
    margin:auto;
    font-size:30px;
    color:#666;

  }
</style>
